import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.platform

Item {
    width: 200
    height: 400

    signal configPlayBtnClicked()

    property int clickedIndex: 0
    property color backgroundColor: "#A1A2A3"
    property int effectEditColorFlag: 1
    property int leftSideFontSize: 14
    property real itemHeight: 30

    function setItemShowHide(currentIndex) {
        rwLedNumEdit.visible = false;
        rwSections.visible = false;
        rwSpacings.visible = false;
        rwFrames.visible = false;
        rwColorRow.visible = false;
        rwBackColorRow.visible = false;
        switch(currentIndex) {
            case 0:
                rwColorRow.visible = true;
                break;
            case 1:
                rwLedNumEdit.visible = true;
                rwSections.visible = true;
                rwSpacings.visible = true;
                rwFrames.visible = true;
                rwColorRow.visible = true;
                rwBackColorRow.visible = true;
                break;
        }
    }

    MouseArea {
        anchors.fill: parent

        onClicked: {
            parent.focus = true
        }
    }

    ColorDialog {
        id: effectEditColorDialog

        onAccepted: {
            switch(effectEditColorFlag) {
                case 1: rwColor.inputText = color.toString(); break;
                case 2: rwBackColor.inputText = color.toString(); break;
            }
        }
    }

    StackLayout {
        width: parent.width
        height: parent.height - tabBar.height
        currentIndex: clickedIndex

        Rectangle {
            id: editTab
            width: parent.width
            height: parent.height
            color: backgroundColor

            Column {
                anchors.fill: parent
                padding: 10
                spacing: 10

                AsComboBox {
                    id: editMode
                    x: 40
                    width: 140
                    height: itemHeight
                    model: [ "单色模式", "多段流水"]
                    backDisplay: true
                    backColor: backgroundColor
                    textColor: "#000000"
                    borderWidth: 1
                    borderColor: "#888888"

                    onCurrentIndexChanged: {
                        setItemShowHide(currentIndex)
                    }
                }

                TitleTextInput {
                    id: ledNumEdit
                    width: 200
                    height: itemHeight
                    titleText: qsTr("灯珠总数:")
                    titleWidth: 70
                    textColor: "#000000"
                    textSize: leftSideFontSize
                    inputBackColor: backgroundColor
                    inputBorderWidth: 1
                    inputBorderColor: "#888888"
                    inputText: "0"
                    inputValidator: RegularExpressionValidator { regularExpression: /[0-9]+/ } // 文本验证器 仅可输入数字

                }

                TitleTextInput {
                    id: rwLedNumEdit
                    width: 200
                    height: itemHeight
                    titleText: qsTr("流动数量:")
                    titleWidth: 70
                    textColor: "#000000"
                    textSize: leftSideFontSize
                    inputBackColor: backgroundColor
                    inputBorderWidth: 1
                    inputBorderColor: "#888888"
                    inputText: "0"
                    inputValidator: RegularExpressionValidator { regularExpression: /[0-9]+/ } // 文本验证器 仅可输入数字
                }

                TitleTextInput {
                    id: rwSections
                    width: 200
                    height: itemHeight
                    titleText: qsTr("流动段数:")
                    titleWidth: 70
                    textColor: "#000000"
                    textSize: leftSideFontSize
                    inputBackColor: backgroundColor
                    inputBorderWidth: 1
                    inputBorderColor: "#888888"
                    inputText: "1"
                    inputValidator: RegularExpressionValidator { regularExpression: /[0-9]+/ } // 文本验证器 仅可输入数字
                }

                TitleTextInput {
                    id: rwSpacings
                    width: 200
                    height: itemHeight
                    titleText: qsTr("每段间隔:")
                    titleWidth: 70
                    textColor: "#000000"
                    textSize: leftSideFontSize
                    inputBackColor: backgroundColor
                    inputBorderWidth: 1
                    inputBorderColor: "#888888"
                    inputText: "0"
                    inputValidator: RegularExpressionValidator { regularExpression: /[0-9]+/ } // 文本验证器 仅可输入数字
                }

                TitleTextInput {
                    id: rwFrames
                    width: 200
                    height: itemHeight
                    titleText: qsTr("流动保持帧数:")
                    titleWidth: 98
                    textColor: "#000000"
                    textSize: leftSideFontSize
                    inputBackColor: backgroundColor
                    inputBorderWidth: 1
                    inputBorderColor: "#888888"
                    inputText: "1"
                    inputValidator: RegularExpressionValidator { regularExpression: /[0-9]+/ } // 文本验证器 仅可输入数字
                }

                Row {
                    id: rwColorRow
                    width: parent.width
                    height: itemHeight
                    spacing: 10

                    TitleTextInput {
                        id: rwColor
                        width: 140
                        height: parent.height
                        titleText: qsTr("前景颜色:")
                        titleWidth: 70
                        textColor: "#000000"
                        textSize: leftSideFontSize
                        inputBackColor: backgroundColor
                        inputBorderWidth: 1
                        inputBorderColor: "#888888"
                        inputText: "#000000"
                    }

                    AsButton {
                        id: rwColorBtn
                        width: 70
                        height: parent.height
                        text: qsTr("选择颜色")
                        font.pixelSize: leftSideFontSize
                        itemRadius: 0
                        borderWidth: 1
                        backColor: backgroundColor
                        textColor: "#000000"


                        onClicked: {
                            effectEditColorFlag = 1
                            effectEditColorDialog.currentColor = Qt.color(rwColor.inputText)
                            effectEditColorDialog.open()
                        }
                    }
                }

                Row {
                    id: rwBackColorRow
                    width: parent.width
                    height: itemHeight
                    spacing: 10

                    TitleTextInput {
                        id: rwBackColor
                        width: 140
                        height: parent.height
                        titleText: qsTr("背景颜色:")
                        titleWidth: 70
                        textColor: "#000000"
                        textSize: leftSideFontSize
                        inputBackColor: backgroundColor
                        inputBorderWidth: 1
                        inputBorderColor: "#888888"
                        inputText: "#000000"
                    }

                    AsButton {
                        id: rwBackColorBtn
                        width: 70
                        height: parent.height
                        text: qsTr("选择颜色")
                        font.pixelSize: leftSideFontSize
                        itemRadius: 0
                        borderWidth: 1
                        backColor: backgroundColor
                        textColor: "#000000"

                        onClicked: {
                            effectEditColorFlag = 2
                            effectEditColorDialog.currentColor = Qt.color(rwBackColor.inputText)
                            effectEditColorDialog.open()
                        }
                    }
                }

                AsButton {
                    id: configPlayBtn
                    x: 60
                    width: 100
                    height: itemHeight
                    text: qsTr("更新灯效")
                    font.pixelSize: leftSideFontSize
                    itemRadius: 0
                    borderWidth: 1
                    backColor: backgroundColor
                    textColor: "#000000"

                    onClicked: {
                        myHandle.setMyProperty("lNum", ledNumEdit.inputText)
                        switch(editMode.currentIndex) {
                            case 0: myHandle.oneColor_create(Qt.color(rwColor.inputText)); break;
                            case 1: myHandle.sectionsRWL_create(Number(rwLedNumEdit.inputText), Number(rwSpacings.inputText), Number(rwSections.inputText), Number(rwFrames.inputText), Qt.color(rwColor.inputText), Qt.color(rwBackColor.inputText)); break;
                        }
                        configPlayBtnClicked()
                    }
                }
            }
        }

        Rectangle {
            id: testTab
            color: backgroundColor

        }
    }

    Rectangle {
        id: tabBar
        width: parent.width
        height: 30
        anchors.bottom: parent.bottom
        color: "#24292e"

        Row {
            anchors.fill: parent

            TextBtn {
                id: editBtn
                width: 50
                height: parent.height
                tbText: qsTr("制作")
                tbBackColor: backgroundColor
                tbColor: "#24292e"
                tbFontSize: 15

                onClicked: {
                    clickedIndex = 0
                    tbBackColor = backgroundColor
                    tbColor = "#24292e"
                    testBtn.tbBackColor = "#24292e"
                    testBtn.tbColor = "#d1d5da"
                }
            }

            TextBtn {
                id: testBtn
                width: 50
                height: parent.height
                tbText: qsTr("测试")
                tbBackColor: "#24292e"
                tbColor: "#d1d5da"
                tbFontSize: 15

                onClicked: {
                    clickedIndex = 1
                    tbBackColor = backgroundColor
                    tbColor = "#24292e"
                    editBtn.tbBackColor = "#24292e"
                    editBtn.tbColor = "#d1d5da"
                }
            }
        }
    }
}
